<mat-list-item class="container"
               [@item]="widerPrinrity"
              [ngClass]="{
              'priority-normal':item.priority === 3,
              'priority-important':item.priority === 2,
              'priority-emergency':item.priority === 1}"
               (click)="onItemClick()"
               [app-draggable]="true"
               [draggedClass]="'drag-start'"
>
  <mat-checkbox
    class="completion-status"
    [checked]="item.completed"
    (click)="onCheckboxClick($event)"
  ></mat-checkbox>

  <div mat-line class="content" [ngClass]="{'completed':item.completed}">
    <span [matTooltip]="item.desc">{{item.desc}}</span>
  </div>
  <div mat-line class="bottom-bar">
    <span class="due-date" *ngIf="item.dueDate">
      {{item.dueDate | date:'yy-MM-dd'}}
    </span>
    <mat-icon *ngIf="item.reminder">alarm</mat-icon>
  </div>
  <mat-icon [svgIcon]="avatar" mat-list-avatar class="avatar"></mat-icon>
</mat-list-item>
